import VueRouter from 'vue-router'
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '@/pages/News.vue'
import Messages from '@/pages/Messages.vue'
import Details from '@/pages/Details.vue'

const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: About
        },
        {
            name: 'about',
            path: '/about',
            component: About,
            meta: {
                isAuth: true,
                title: '关于'
            }
        },
        {
            name: 'home',
            path: '/home',
            component: Home,
            beforeEnter: (to, from, next) => {
                if(to.meta.isAuth) {
                    if(localStorage.getItem('auth') === 'lqj') {
                        next()
                    }else {
                        alert('未经lqj允许，无法访问该页面内容')
                    }
                }else {
                    next()
                }
            },
            meta: {
                title: '主页',
                isAuth: true 
            },
            children: [
                {
                    name: 'news',
                    path: 'news',
                    component: News,
                    meta: {
                        isAuth: true,
                        title: '新闻'
                    }
                },
                {
                    name: 'messages',
                    path: 'messages',
                    component: Messages,
                    meta: {
                        isAuth: true,
                        title: '信息'
                    },
                    children: [
                        {
                            name: 'details',
                            // path: 'details/:id/:name',
                            path: 'details',
                            component: Details,
                            meta: {
                                title: '详情'
                            },
                            /* props: {
                                a: 'query',
                                b: 'params'
                            }, */
                            // props: true,
                            props(route) {
                                return {
                                    id: route.query.id,
                                    name: route.query.name
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

router.beforeEach((to, from, next) => {
    /* if(to.path === '/home/news' || to.path === '/home/messages') {
        if(localStorage.getItem('auth') === 'lqj') {
            next()
        }else {
            alert('未经lqj允许，无法访问该页面内容')
        }
    }else {
        next()
    } */
    if(to.meta.isAuth) {
        if(localStorage.getItem('auth') === 'lqj') {
            next()
        }else {
            alert('未经lqj允许，无法访问该页面内容')
        }
    }else {
        next()
    }
})

router.afterEach(to => {
    document.title = to.meta.title || 'vuecli'
})

export default router